<template>
  <div class="app-situation">
    <div class="app-situation-table">
      <div class="situation-introduce">
        <!-- <span class="el-icon-close span-close" style="font-size: 13px"
          >&nbsp;未提交</span
        >
        <span class="el-icon-check span-check" style="font-size: 13px"
          >&nbsp;已提交</span
        >
        <span class="el-icon-minus span-minus" style="font-size: 13px"
          >&nbsp;未开始</span
        > -->
        <el-select
          v-model="year"
          placeholder="请选择年份"
          @change="selectYearChange"
        >
          <el-option
            v-for="item in years"
            :key="item.value"
            :label="item.text"
            :value="item.value"
          />
        </el-select>
      </div>
      <el-table :data="tableList" border style="width: 100%">
        <el-table-column
          :label="year + year_content"
          prop="year"
          align="center"
        >
          <el-table-column
            label="项目名称"
            align="center"
            width="300"
            :show-overflow-tooltip="true"
            prop="project_name"
          />
          <el-table-column label="所属分公司" align="center" prop="user_name" />
          <!-- <el-table-column label="一月" align="center" prop="month_1"> -->
          <el-table-column label="一月" align="center" prop="month_1">
            <template slot-scope="scope">
              <span
                v-show="scope.row.month_1 == 0"
                class="span-close"
              >未提交</span>
              <span
                v-show="scope.row.month_1 == 1"
                class="span-check"
              >已提交</span>
              <span
                v-show="scope.row.month_1 == 2"
                class="span-close"
              >未开始</span>
            </template>
          </el-table-column>
          <el-table-column label="二月" align="center" prop="month_2">
            <template slot-scope="scope">
              <span
                v-show="scope.row.month_2 == 0"
                class="span-close"
              >未提交</span>
              <span
                v-show="scope.row.month_2 == 1"
                class="span-check"
              >已提交</span>
              <span
                v-show="scope.row.month_2 == 2"
                class="span-minus"
              >未开始</span>
            </template>
          </el-table-column>
          <el-table-column label="三月" align="center" prop="month_3">
            <template slot-scope="scope">
              <span
                v-show="scope.row.month_3 == 0"
                class="span-close"
              >未提交</span>
              <span
                v-show="scope.row.month_3 == 1"
                class="span-check"
              >已提交</span>
              <span
                v-show="scope.row.month_3 == 2"
                class="span-minus"
              >未开始</span>
            </template>
          </el-table-column>
          <el-table-column label="四月" align="center" prop="month_4">
            <template slot-scope="scope">
              <span
                v-show="scope.row.month_4 == 0"
                class="span-close"
              >未提交</span>
              <span
                v-show="scope.row.month_4 == 1"
                class="span-check"
              >已提交</span>
              <span
                v-show="scope.row.month_4 == 2"
                class="span-minus"
              >未开始</span>
            </template>
          </el-table-column>
          <el-table-column label="五月" align="center" prop="month_5">
            <template slot-scope="scope">
              <span
                v-show="scope.row.month_5 == 0"
                class="span-close"
              >未提交</span>
              <span
                v-show="scope.row.month_5 == 1"
                class="span-check"
              >已提交</span>
              <span
                v-show="scope.row.month_5 == 2"
                class="span-minus"
              >未开始</span>
            </template>
          </el-table-column>
          <el-table-column label="六月" align="center" prop="month_6">
            <template slot-scope="scope">
              <span
                v-show="scope.row.month_6 == 0"
                class="span-close"
              >未提交</span>
              <span
                v-show="scope.row.month_6 == 1"
                class="span-check"
              >已提交</span>
              <span
                v-show="scope.row.month_6 == 2"
                class="span-minus"
              >未开始</span>
            </template>
          </el-table-column>
          <el-table-column label="七月" align="center" prop="month_7">
            <template slot-scope="scope">
              <span
                v-show="scope.row.month_7 == 0"
                class="span-close"
              >未提交</span>
              <span
                v-show="scope.row.month_7 == 1"
                class="span-check"
              >已提交</span>
              <span
                v-show="scope.row.month_7 == 2"
                class="span-minus"
              >未开始</span>
            </template>
          </el-table-column>
          <el-table-column label="八月" align="center" prop="month_8">
            <template slot-scope="scope">
              <span
                v-show="scope.row.month_8 == 0"
                class="span-close"
              >未提交</span>
              <span
                v-show="scope.row.month_8 == 1"
                class="span-check"
              >已提交</span>
              <span
                v-show="scope.row.month_8 == 2"
                class="span-minus"
              >未开始</span>
            </template>
          </el-table-column>
          <el-table-column label="九月" align="center" prop="month_9">
            <template slot-scope="scope">
              <span
                v-show="scope.row.month_9 == 0"
                class="span-close"
              >未提交</span>
              <span
                v-show="scope.row.month_9 == 1"
                class="span-check"
              >已提交</span>
              <span
                v-show="scope.row.month_9 == 2"
                class="span-minus"
              >未开始</span>
            </template>
          </el-table-column>
          <el-table-column label="十月" align="center" prop="month_10">
            <template slot-scope="scope">
              <span
                v-show="scope.row.month_10 == 0"
                class="span-close"
              >未提交</span>
              <span
                v-show="scope.row.month_10 == 1"
                class="span-check"
              >已提交</span>
              <span
                v-show="scope.row.month_10 == 2"
                class="span-minus"
              >未开始</span>
            </template>
          </el-table-column>
          <el-table-column label="十一月" align="center" prop="month_11">
            <template slot-scope="scope">
              <span
                v-show="scope.row.month_11 == 0"
                class="span-close"
              >未提交</span>
              <span
                v-show="scope.row.month_11 == 1"
                class="span-check"
              >已提交</span>
              <span
                v-show="scope.row.month_11 == 2"
                class="span-minus"
              >未开始</span>
            </template></el-table-column>
          <el-table-column label="十二月" align="center" prop="month_12">
            <template slot-scope="scope">
              <span
                v-show="scope.row.month_12 == 0"
                class="span-close"
              >未提交</span>
              <span
                v-show="scope.row.month_12 == 1"
                class="span-check"
              >已提交</span>
              <span
                v-show="scope.row.month_12 == 2"
                class="span-minus"
              >未开始</span>
            </template></el-table-column>
          <el-table-column align="center" width="100" label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="toDetail(scope.row.id)"
              >查看详细</el-button>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <div
        v-show="tableList.length != 0"
        class="pagination"
        style="margin-top: 15px"
      >
        <el-pagination
          ref="pager1"
          background
          :current-page.sync="pageIndex"
          :page-size="pageSize"
          :total="total"
          layout="prev, pager, next"
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getReportSituation, getReportSituationPage } from '@/api/report'
export default {
  data() {
    return {
      tableList: [],
      years: [],
      total: 0,
      pageIndex: 1,
      pageSize: 2,
      year: '2021',
      year_content: '年分公司月报上报情况'
    }
  },
  created() {
    this.init()
    this.getList(null)
  },
  methods: {
    toDetail(id) {
      this.$router.push({
        path: '/report/details',
        query: { value: 1, id: id }
      })
    },
    selectYearChange(value) {
      this.year = value
      this.getList(value)
    },
    getList(year) {
      new Promise((resolve, reject) => {
        getReportSituation({ year: year })
          .then((res) => {
            this.tableList = res.data.data
            this.total = res.data.total
            this.pageSize = res.data.to
          })
          .catch((err) => {})
      })
    },
    currentChangeHandle: function(val) {
      new Promise((resolve, reject) => {
        getReportSituationPage(val, { year: this.year })
          .then((res) => {
            console.log(res)
            this.tableList = res.data.data
          })
          .catch((err) => {})
      })
    },
    // 下一页
    sizeChangeHandle: function(size) {
      this.pagesize = size
    },
    init() {
      var myDate = new Date()
      var year = myDate.getFullYear() // 获取当前年
      this.year = year + '年'
      this.years = []
      for (let i = 0; i < 10; i++) {
        this.years.push({ value: year - i, text: year - i + '年' })
      }
    },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    }
  }
}
</script>

<style lang="scss" scoped>
.app-situation {
  width: 100%;
  padding: 20px;
}
.app-situation .span-close {
  color: #a52a2a;
  font-size: 13px;
}
.app-situation .span-minus {
  color: #00bfff;
  font-size: 13px;
}
.app-situation .span-check {
  color: #32cd32;
  font-size: 13px;
}
.situation-introduce {
  display: flex;
  flex-direction: row;
  font-size: 15px;
  margin-bottom: 10px;
}
.situation-introduce span {
  margin-left: 10px;
}
.el-input .el-input--mini .el-input--suffix {
  width: 90px;
}

// .app-situation .app-situation-table .el-table__header-wrapper .el-table__header .is-group .has-gutter
</style>
